import React from 'react';
import Chart from 'echarts-for-react';
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
import {realTimeData} from '../../../services/cockpit';

const bar1 = 'image://'+require('../../../assets/bar6.png');

// let data = {
//     time:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
//     value:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
// }
const style = {
    color:'#ccc',
    borderBottom: '1px solid #44687E',
    marginLeft:50,
    position: 'absolute',
    zIndex:100,
    fontSize:'12px',
};
const factorList = ['颗粒物','一氧化碳','氮氧化物','氧化氢','扬尘','异味','噪音'];
const factorCode = ['pl','co','nox','hcl','raiseDustValue','peculiarSmellValue','noiseValue'];

class MyBarL extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeKey:'pl',
            dataList: '',
        };
    }
    componentDidMount() {
        this.changeKey = setInterval(() => {
            let nowKey = factorCode.indexOf(this.state.activeKey);
            let newKey;
            if(nowKey<6){
                newKey = factorCode[nowKey+1];
            }else{
                newKey = factorCode[0];
            }
            this.onTabClick(newKey);
            this.setState({
                activeKey:newKey
            })
        }, 5000);

        realTimeData({contaminant:this.state.activeKey}).then(data => {
            let dataList = data.data.ret;
            console.log(dataList)
            this.setState({
                dataList
            })
        })
    }
    componentWillUnmount() {
        clearTimeout(this.changeKey)
    }
    onTabClick = (key) => {
        realTimeData({contaminant:key}).then(data => {
            let dataList = data.data.ret;
            this.setState({
                activeKey:key,
                dataList
            })
        })
    };
    setOption = () => {
        let myOption;
        let data = this.state.dataList;
        myOption = {
        textStyle:{color:'#fff'},
        color:'#2EC2FF',
        tooltip : {
            trigger: 'axis'
        },
        calculable : true,
        xAxis : [
            {
                axisLine:{lineStyle:{color:'#144B59'}},
                type : 'category',
                data : data.time
            }
        ],
        yAxis : [
            {
                axisLine:{lineStyle:{color:'#144B59'}},
                splitLine:{lineStyle:{color:'#063436',type:'dashed'}},
                type : 'value',
                max: function(value) {
                    return parseInt(value.max * 1.5)
                }
            },
            
        ],
        series : [
            {
                name:'',
                type: 'pictorialBar',
                symbol: bar1,
                barGap: 0,
                symbolSize: ['100%', '100%'],
                barWidth:"60%",
                markLine : {
                    data : [
                        {yAxis : data.yAxis, name : '限值'}
                    ],
                    lineStyle:{color:'#2BDDC2',type:'dashed'}
                },
                data:data.value
            }
        ]
    };
        return myOption;
    };
    render() {

        return (
            <div>
                <Tabs
                    tabBarStyle={style}
                    defaultActiveKey="0"
                    tabBarGutter={-20}
                    size="small"
                  
                    activeKey={this.state.activeKey}
                    onChange={this.onTabClick}>
                   
                    {
                        factorList.map((index,key)=>{
                            return(
                                <TabPane tab={index} key={factorCode[key]}
                               
                                >
                                    <Chart
                                        option={this.setOption()}
                                        notMerge
                                        lazyUpdate
                                        style={{ height: 290 }}
                                    />
                                </TabPane>
                            )
                        })
                    }
                </Tabs>
            </div>
        )
    }
}
export default MyBarL;
